<template>
  <div>
    <div class="box">
      <div class="science_list">
        <el-table
          :data="
            scenicList.slice(
              (currentPage - 1) * pageSize,
              currentPage * pageSize
            )
          "
          v-loading="loading"
          style="width: 100%"
        >
          <el-table-column label="ID" width="80" fixed>
            <template #default="scope">
              <div style="display: flex; align-items: center">
                <span>{{ scope.row.id }}</span>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="订单编号" width="200" fixed>
            <template #default="scope">
              <span>{{ scope.row.order_sn }}</span>
            </template>
          </el-table-column>
          <el-table-column label="用户名称" fixed>
            <template #default="scope">
              <div style="display: flex; align-items: center">
                <span>{{ scope.row.uname }}</span>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="收件人姓名" width="150">
            <template #default="scope">
              <div style="display: flex; align-items: center">
                <span>{{ scope.row.aname }}</span>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="收件人电话" width="150">
            <template #default="scope">
              <div style="display: flex; align-items: center">
                <span>{{ scope.row.tel }}</span>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="收件人地址" width="180">
            <template #default="scope">
              <div style="display: flex; align-items: center">
                <span>{{ scope.row.address }}</span>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="状态" width="80">
            <template #default="scope">
              <div style="display: flex; align-items: center">
                <span>{{ judge(scope.row.status) }}</span>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="商品" width="120">
            <template #default="scope">
              <div style="display: flex; align-items: center">
                <el-button
                  size="small"
                  @click="displayList(scope.$index)"
                  type="primary"
                  >商品详情</el-button
                >
              </div>
            </template>
          </el-table-column>
          <el-table-column label="操作" width="150">
            <template #default="scope">
              <div style="display: flex; align-items: center">
                <el-button
                  size="small"
                  @click="handleEdit(scope.row.id, 1)"
                  type="success"
                  >发货</el-button
                ><el-button
                  size="small"
                  @click="handleEdit(scope.row.id, 2)"
                  type="danger"
                  >退款</el-button
                >
              </div>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="paging">
        <el-pagination
          :align="center"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[1, 5, 10, 20]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="scenicList.length"
        />
      </div>
    </div>
    <!-- 列表弹窗 -->
    <el-dialog v-model="dialogTableVisible" :title="grid">
      <el-table
        :data="
          gridData.slice(
            (goodsCurrentPage - 1) * goodsPageSize,
            goodsCurrentPage * goodsPageSize
          )
        "
        style="width: 100%"
      >
        <el-table-column label="ID" width="60" fixed>
          <template #default="scope">
            <div style="display: flex; align-items: center">
              <span>{{ scope.row.id }}</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="商品图片" fixed>
          <template #default="scope">
            <div style="display: flex; align-items: center">
              <img
                :src="'https://c2c.kuxia.top' + scope.row.img"
                alt=""
                style="width: 50px"
              />
            </div>
          </template>
        </el-table-column>
        <el-table-column label="商品名称" width="100" fixed>
          <template #default="scope">
            <div style="display: flex; align-items: center">
              <span>{{ scope.row.name }}</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="单价" width="100">
          <template #default="scope">
            <div style="display: flex; align-items: center">
              <span>{{ scope.row.price }}</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="数量">
          <template #default="scope">
            <div style="display: flex; align-items: center">
              <span>{{ scope.row.num }}</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="评价" width="150">
          <template #default="scope">
            <div style="display: flex; align-items: center">
              <span>{{
                scope.row.evaluate == null ? "暂无评价" : "scope.row.evaluate"
              }}</span>
            </div>
          </template>
        </el-table-column>
      </el-table>
      <div class="paging">
        <el-pagination
          :align="center"
          @size-change="goodsHandleSizeChange"
          @current-change="goodsHandleCurrentChange"
          :current-page="goodsCurrentPage"
          :page-sizes="[1, 5, 10, 20]"
          :page-size="goodsPageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="gridData.length"
        />
      </div>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import "@wangeditor/editor/dist/css/style.css"; // 引入 css

import { onBeforeUnmount, ref, shallowRef, onMounted } from "vue";
import { Editor, Toolbar } from "@wangeditor/editor-for-vue";
import { reactive } from "vue";
import {
  Plus,
  Delete,
  Search,
  Grid,
  Upload,
  Operation
} from "@element-plus/icons-vue";
// import { CountTo } from "vue3-count-to";
import { orderList, hair, refund } from "@/api/userList";
// import packpage from "../../../package.json";
// import { useI18n } from "vue-i18n";
// import { getResouceList } from "@/api/index";

// import { useStore } from "vuex";
// import axios from "axios";
import { ElMessage, ElMessageBox } from "element-plus";
import type { UploadProps, UploadUserFile } from "element-plus";
import { userlist } from "@/pinia/userlist";
const user = userlist();
console.log(user.orderListlsit);
const currentPage = ref(1);
const goodsCurrentPage = ref(1);
const pageSize = ref(5);
const goodsPageSize = ref(5);
const scenicList = ref([]);
const dialogTableVisible = ref(false);
const dialogFormVisible = ref(false);
const form = reactive({
  money: ""
});
const userId = ref();
const grid = ref();
const gridData = ref([]);
const loading = ref(true);
//请求列表信息
if (user.orderListlsit.length) {
  loading.value = false;
  scenicList.value = user.orderListlsit;
} else {
  user.getorderList().then(res => {
    loading.value = false;
    console.log(res);
    scenicList.value = res;
  });
}

//判断状态值返回字符串
const judge = status => {
  if (status == 1) {
    return "未付款";
  } else if (status == 2) {
    return "已付款";
  } else if (status == 3) {
    return "已发货";
  } else if (status == 4) {
    return "已收货";
  } else if (status == 5) {
    return "已评价";
  } else if (status == 6) {
    return "退款中";
  } else if (status == 7) {
    return "已退款";
  } else if (status == 8) {
    return "已取消";
  }
};

//显示充值弹窗并存储所点击的用户ID
const handleEdit = (id, status) => {
  let comment = "";
  let title = "";
  if (status == 1) {
    comment = "是否确认发货？";
    title = "订单发货";
  } else {
    comment = "是否确认退款？";
    title = "订单退款";
  }
  ElMessageBox.confirm(comment, title, {
    confirmButtonText: "确认",
    cancelButtonText: "取消",
    type: "订单发货"
  })
    .then(() => {
      if (status == 1) {
        hair({
          id: id
        }).then(res => {
          console.log(res);
          if (res.data.code == 0) {
            ElMessage({
              type: "error",
              message: res.data.msg
            });
          } else {
            ElMessage({
              type: "success",
              message: res.data.msg
            });
          }
        });
      } else {
        refund({
          id: id
        }).then(res => {
          console.log(res);
          if (res.data.code == 0) {
            ElMessage({
              type: "error",
              message: res.data.msg
            });
          } else {
            ElMessage({
              type: "success",
              message: res.data.msg
            });
          }
        });
      }
    })
    .catch(() => {
      ElMessage({
        type: "info",
        message: "已取消"
      });
    });
};

//显示充值弹窗并存储所点击的用户ID
const affirmRecharge = () => {
  recharge({
    uid: userId,
    money: form.money
  }).then(res => {
    console.log(res);
    if (res.data.code == 1) {
      ElMessage({
        message: res.data.msg,
        type: "success"
      });
      user.getList().then(res => {
        console.log(res);
        scenicList.value = res;
      });
    } else {
      ElMessage.error(res.data.msg);
    }
  });
  dialogFormVisible.value = false;
  form.money = "";
};
//取消充值
const cancelRecharge = () => {
  dialogFormVisible.value = false;
  form.money = "";
};
//显示列表
const displayList = i => {
  console.log(user.orderListlsit[i].list);
  gridData.value = user.orderListlsit[i].list;
  dialogTableVisible.value = true;
};

//每页条数改变时触发 选择一页显示多少行
function handleSizeChange(val) {
  console.log(`每页 ${val} 条`);
  currentPage.value = 1;
  pageSize.value = val;
}
function goodsHandleSizeChange(val) {
  console.log(`每页 ${val} 条`);
  goodsCurrentPage.value = 1;
  goodsPageSize.value = val;
}
//当前页改变时触发 跳转其他页
function handleCurrentChange(val) {
  console.log(`当前页: ${val}`);
  currentPage.value = val;
}
//当前页改变时触发 跳转其他页
function goodsHandleCurrentChange(val) {
  console.log(`当前页: ${val}`);
  goodsCurrentPage.value = val;
}
</script>

<style scoped>
.box {
  background-color: white;
  padding: 20px;
}
.button {
  width: 100%;
  display: flex;
  justify-content: space-between;
}
.paging {
  width: 100%;
  text-align: center;
  margin-top: 10px;
}
.el-button--text {
  margin-right: 15px;
}
.el-select {
  width: 300px;
}
.el-input {
  width: 300px;
}
.dialog-footer button:first-child {
  margin-right: 10px;
}
</style>
